<template>
  <div style="width:98%;margin-left:1%;margin-top:2%;display:block;">
    <a-table :columns="outColumns" :data-source="data" class="components-table-demo-nested" :scroll="{y:525 }">
      <span slot='operation' slot-scope="text,record">
          <a @click="monitor(record.roomId)">查看监控</a>
          <my-form/>
      </span>
          
    </a-table>
  </div>
</template>
<script>
  import myForm from '@/components/myForm.vue';
  import moment from 'moment';
  import { mapActions , mapState} from 'vuex'
  /*
  * EditableCell Code https://github.com/vueComponent/ant-design-vue/blob/master/components/table/demo/EditableCell.vue
  */
  export default {
    components: {
      myForm,
    },
    computed: {
      ...mapState({
        signIn: state => state.account.signIn,
        account: state => state.account.account
      })
    },
    data() {
      return {
        visible : true,
        disable :false,
        signData: [],
        mulData: [],
        dateFormat: 'YYYY-MM-DD',
        data:[
          {
            key:0,
            roomId:512,
            leaderId:'8209190507',
            temperature:28.0,
            humility:0.4,
            status:'正常',
            memo:'',   
            student:[]
          },
          {
            key:1,
            roomId:513,
            leaderId:'8209190507',
            temperature:28.0,
            humility:0.4,
            status:'正常',
            memo:'',
            student:[]
          }
        ],
        dataSource: [
            {
              key:0,
              studentId:'8209190507',
              roomId:512,
              name:'夏家豪',
              status:'请假',
              phone:'17812312323'
            },
            {
              key:1,
              studentId:'8209190508',
              roomId:512,
              name:'夏家豪1',
              status:'请假',
              phone:'17812312323'
            },
            {
              key:2,
              studentId:'8209190509',
              roomId:512,
              name:'夏家豪2',
              status:'请假',
              phone:'17812312323'
            },
            {
            key:3,
            studentId:'8209190510',
            roomId:513,
            name:'夏家豪3',
            status:'请假',
            phone:'17812312323'
            } 
        ],
        dataCount:2,
        count: 4,
        outColumns:[
          {
            title: '寝室号',
            dataIndex: 'roomId',
            width: '150',
            scopedSlots: { customRender: 'roomId' },
          },
          {
            title: '寝室长学号',
            dataIndex: 'leaderId',
            width: '150',
            scopedSlots: { customRender: 'leaderId' },
          },
          {
            title: '温度',
            dataIndex: 'temperature',
            width: '150',
            scopedSlots: { customRender: 'temperature' },
          },
          {
            title: '湿度',
            dataIndex: 'humility',
            width: '150',
            scopedSlots: { customRender: 'humility' },
          },
          {
            title: '状态',
            dataIndex: 'status',
            width: '150',
            scopedSlots: { customRender: 'status' },
          },
          {
            title: '备注',
            dataIndex: 'memo',
            width: '150',
            scopedSlots: { customRender: 'memo' },
          },
          {
            title: '操作',
            dataIndex: 'operation',
            width: '50',
            scopedSlots: { customRender: 'operation' },
          },
        ],
        fields:['roomId', 'leaderId','temperature','humility','status','memo'],
        rules: {
          leaderId: {
            rules: [{
              required: true,
              message: '请输入学号',
            }],
          },
         roomId: {
            rules: [{
              required: true,
              message: '请输入寝室号',
            }],
          },
          memo: {
            rules: [{
              required: false,
            }],
          },
          temperature: {
            rules: [{
              required: true,
            }],
          },
          humility: {
            rules: [{
              required: true,
            }],
          },
        },
      };
    },
    methods: {
      ...mapActions({
      getAccountList: 'account/getAccountList',
      updateAccount: 'account/updateAccount',
      deleteAccount: 'account/deleteAccount',
      addAccount: 'account/addAccount',
      resetAccount: 'account/resetAccount'
    }),
      moment,
      monitor(key){
        console.log(key)
      },
      openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),
       
      });
    }
    },
    mounted(){
      if(this.signIn===false||this.account===null){
        this.openNotification("NOK","未登录","请先登录管理员账号!")
        this.$router.push("/mainPage/login")
      }
      else{
        // this.getAccountList({type: 'getAccountList', studentId:'',password:''}).then((res) => {
        //   let i = 0
        //   for(let item of res){
        //     item.key = i++
        //     this.dataSource.push(item);
        //   }
        //   this.count = this.dataSource.length
        //   this.openNotification("OK","更新用户列表成功","用户列表已更新!")
        // }, (error) => {
        //   this.openNotification("NOK","更新用户列表失败",error)
        // })
      }
    }
  };
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
  li {
    text-align: left;
  }
  pre {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #ccc;
  }
</style>